@charset "UTF-8";

@mixin overshoot($p, $t: normal, $c: gtk("@theme_window_foreground_normal")) {
    //
    // overshoot
    //
    // $p: position
    // $t: type
    // $c: base color
    //
    // possible $p values:
    // top, bottom, right, left
    //
    // possible $t values:
    // normal, backdrop
    //

    $_small_gradient_length: 5%;
    $_big_gradient_length: 100%;

    $_position: center top;
    $_small_gradient_size: 100% $_small_gradient_length;
    $_big_gradient_size: 100% $_big_gradient_length;

    @if $p==bottom {
        $_position: center bottom;
        $_linear_gradient_direction: to top;
    } @else if $p==right {
        $_position: right center;
        $_small_gradient_size: $_small_gradient_length 100%;
        $_big_gradient_size: $_big_gradient_length 100%;
    } @else if $p==left {
        $_position: left center;
        $_small_gradient_size: $_small_gradient_length 100%;
        $_big_gradient_size: $_big_gradient_length 100%;
    }

    $_small_gradient_color: $c;
    $_big_gradient_color: $c;

    @if $c==gtk("@theme_fg_color") {
        $_small_gradient_color: gtkshade("@borders", 0.9);
        $_big_gradient_color: gtk("@theme_fg_color");

        @if $t==backdrop {
            $_small_gradient_color: gtk("@unfocused_borders");
        }
    }

    $_small_gradient: -gtk-gradient(
        radial,
        $_position,
        0,
        $_position,
        0.5,
        to($_small_gradient_color),
        to(gtkalpha($_small_gradient_color, 0))
    );

    $_big_gradient: -gtk-gradient(
        radial,
        $_position,
        0,
        $_position,
        0.6,
        from(gtkalpha($_big_gradient_color, 0.07)),
        to(gtkalpha($_big_gradient_color, 0))
    );

    @if $t==normal {
        background-image: $_small_gradient, $_big_gradient;
        background-size: $_small_gradient_size, $_big_gradient_size;
    } @else if $t==backdrop {
        background-image: $_small_gradient;
        background-size: $_small_gradient_size;
    }

    background-repeat: no-repeat;
    background-position: $_position;

    background-color: transparent; // reset some properties to be sure to not inherit them somehow
    border: none; //
    box-shadow: none; //
}


scrolledwindow {
    // This is used when content is touch-dragged past boundaries.
    // draws a box on top of the content, the size changes programmatically.
    overshoot {
        &.top {
            @include overshoot(top);

            &:backdrop {
                @include overshoot(top, backdrop);
            }
        }

        &.bottom {
            @include overshoot(bottom);

            &:backdrop {
                @include overshoot(bottom, backdrop);
            }
        }

        &.left {
            @include overshoot(left);

            &:backdrop {
                @include overshoot(left, backdrop);
            }
        }

        &.right {
            @include overshoot(right);

            &:backdrop {
                @include overshoot(right, backdrop);
            }
        }
    }

    // Overflow indication, works similarly to the overshoot, the size if fixed tho.
    undershoot {
        background-image: none;
        border: none;
    }
}